<!DOCTYPE html>
<html>
<head>
<style type="text/css">@import 'fauxconsole.css';</style>
<script type="text/javascript" src="fauxconsole.js"></script>
<!--[if IE]><script src="../js/explorercanvas/excanvas.js"></script><![endif]-->
<script src="../js/jsgamesoup.js"></script>
<script>
// TODO: replace console calls
function startAsteroids(gs) {
	function TestEntity() {
		this.poly = [[135, 120], [150, 135], [135, 150], [120, 135]];
		this.box = [160, 120, 180, 140];
		this.circle = [210, 135, 20];
		
		// any key has been pressed
		this.keyDown = function (keyCode) {
			console.log("keyDown: " + keyCode);
		}
		
		// any key has been released
		this.keyUp = function (keyCode) {
			console.log("keyUp: " + keyCode);
		}
		
		// spacebar held down
		this.keyHeld_32 = function () {
			console.log("keyHeld_32");
		}
		
		// spacebar down
		this.keyDown_32 = function () {
			console.log("keyDown_32");
		}
		
		// spacebar up
		this.keyUp_32 = function () {
			console.log("keyUp_32");
		}
		
		// mouse press event
		this.pointerDown = function (i) {
			console.log("pointerDown: " + i);
		}
		
		// mouse release event
		this.pointerUp = function (i) {
			console.log("pointerUp: " + i);
		}
		
		// mouse move event
		this.pointerMove = function () {
			console.log("pointerMove: " + gs.pointerPosition);
		}
		
		// We implement this method to detect pointer/touch/mouse collisions with a polygon
		this.pointerPoly = function () {
			return this.poly;
		}
		
		// We implement this method to detect pointer/touch/mouse collisions with a box
		this.pointerBox = function () {
			return this.box;
		}
		
		// We implement this method to detect pointer/touch/mouse collisions with a circle
		this.pointerCircle = function () {
			return this.circle;
		}
		
		// We implement this method to draw our polygon
		this.draw = function(c) {
			// draw our circle
			c.strokeStyle = 'rgba(255, 255, 255, 1.0)';
			gs.polygon(this.poly);
			
			// draw our box
			c.beginPath();
			c.strokeRect(this.box[0], this.box[1], this.box[2] - this.box[0], this.box[3] - this.box[1]);
			c.closePath();
			c.stroke();
			
			// draw our circle
			c.beginPath();
			c.arc(this.circle[0], this.circle[1], this.circle[2], 0, Math.PI*2, true);
			c.closePath();
			c.stroke();			
		}
	}
	
	function World() {
		this.draw = function() {
			gs.clear();
			gs.background('rgba(100, 100, 100, 1.0)');
		}
	}
	
	gs.addEntity(new World());
	gs.addEntity(new TestEntity());
}
</script>
<style>
html, body {
	height: 100%;         /* required */
}
body {
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
	overflow: hidden;
}
div#distance { 
	margin-bottom: -10em; /* half of content height */
	/* background: red;      /* temporary - used to see div */
	width: 1px;           /* required to "hide" distance div */
	height: 50%;          /* required */
	float: left;          /* required */

}
div#content {
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 320px;         /* required - desired height */
	width: 480px;          /* required - desired width */
	/* background: blue;     /* cosmetic */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
}
</style>
</head>
<body>
	<div id="distance"></div>
	<div id="content">
		<!-- absolutely centered content -->
		<canvas id='asteroids' jsgs="startAsteroids" fps="40" width="480" height="320"></canvas>
	</div>
</body>
</html>
